<#-- @ftlvariable name="page" type="org.springframework.data.domain.Page<com.fable.sp.core.domain.Container>" -->

<form class="form-horizontal validationEngine">
    <div class="form-group">
        <label class="col-sm-1 control-label">关键字</label>
        <div class="col-sm-2">
            <input type="text" name="orderId" value="${RequestParameters.name}" class="form-control">
        </div>
        <label class="col-md-1 control-label">开始日期</label>
        <div class="col-md-2">
            <input name="beginAt" value="${RequestParameters.beginAt}" class="form-control laydate-date validate[required]" format="YYYY-MM-DD" id="beginDate">
        </div>
        <label class="col-md-1 control-label">结束日期</label>
        <div class="col-md-2">
            <input name="endAt" value="${RequestParameters.endAt}" class="form-control laydate-date validate[required]" format="YYYY-MM-DD" id="endDate">
        </div>
        <div class="col-md-3">
            <button type="submit" class="btn btn-primary">搜索</button>
        </div>
    </div>
</form>
<table class="table table-bordered table-striped">
    <tr>
        <th>标题</th>
        <th>描述</th>
        <th width="290px">操作</th>
        <th width="50px" class="text-right"><a class="btn btn-sm btn-primary"
                                               href="<@spring.url relativeUrl='/sp/addContainer'/>">新建容器</a></th>
    </tr>
<#list page.content as container>
    <tr data-container-id="${container.id}">
        <td>${container.name}</td>
        <td>${container.info}</td>
        <td colspan="2">
            <a class="btn btn-primary"
               href="<@spring.url relativeUrl='/sp/addContainer?containerId=${container.id}'/>">编辑</a>
            <button class="btn btn-primary create-layout-control">新建控制</button>
            <button type="button" class="btn btn-default layout-list">
                <span class="glyphicon glyphicon-chevron-down glyphicon-align-right" aria-hidden="true"></span>控制列表
            </button>
            <a class="btn btn-danger"
               href="<@spring.url relativeUrl='/sp/removeContainer?containerId=${container.id}'/>">删除</a>
        </td>
    </tr>
    <tr style="display: none">
        <td colspan="4" class="layout-container">
        </td>
    </tr>
<#else >
    <tr>
        <td colspan="4" class="text-center">暂无可用容器</td>
    </tr>
</#list>
</table>
<@ui.pagination value=page/>
<script>
    $(function () {
        $(".layout-list").click(function () {
            var _tr = $(this).closest("tr");
            var _nextTr = _tr.next("tr");
            var _icon = $(this).find(".glyphicon");
            var isHidden = _icon.hasClass("glyphicon-chevron-down");
            if (isHidden) {
                _icon.removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-up");
                var containerId = _tr.attr("data-container-id");
                _nextTr.find(".layout-container").load("<@spring.url relativeUrl='/sp/layouts'/>?r="+Math.random()+"&containerId=" + containerId + "&original=false").end().show('slow');
            } else {
                _icon.removeClass("glyphicon-chevron-up").addClass("glyphicon-chevron-down");
                _nextTr.hide('slow');
            }
        });

        var idModals = {};

        $(".create-layout-control").click(function () {
            var containerId = $(this).closest("tr").attr("data-container-id");
            var modal = idModals[containerId];
            if (!modal) {
                modal = SP.modal({
                    title: '控制实例信息',
                    url: '<@spring.url relativeUrl='/sp/layoutInfo'/>?containerId=' + containerId,
                    height: 230,
                    onSubmit: 'onSubmit',
                    buttons: {submit: "确认", close: "关闭"}
                });
                idModals[containerId] = modal;
            }
            modal.modal("show");
        });

        $(".copy-layout").live("click", function () {
            var layoutId = $(this).attr("data-id");
            var key = "copy_" + layoutId;
            var modal = idModals[key];
            if (!modal) {
                modal = SP.modal({
                    title: '复制控制实例',
                    url: '<@spring.url relativeUrl='/sp/layoutInfo'/>?copy=true&id=' + layoutId,
                    height: 230,
                    onSubmit: 'onSubmit',
                    buttons: {submit: "确认", close: "关闭"}
                });
                idModals["copy_" + layoutId] = modal;
            }
            modal.modal("show");
        });

    });
</script>